<template>
  <section>
    <div class="icons">
      <swiper>
        <swiper-slide v-for="(slider,index) in pages">
          <div class="icon-item" v-for="(item,itemIndex) in slider">
            <div class="icon-item-img">
              <img class="item-img-content" :src="item.imgUrl" />
            </div>
            <p class="item-desc">{{ item.desc}}</p>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </section>
</template>

<script>
    export default {
        name: "Icons",
        data () {
            return {
              iconLists: [
                {
                  id: 1,
                  imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
                  desc: '景点门票'
                },
                {
                  id: 2,
                  imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/f0f00d6dfe038c044dbc9a437f58b0eb.png',
                  desc: '北京一日游'
                },
                {
                  id: 3,
                  imgUrl: 'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
                  desc: '北京必游'
                },
                {
                  id: 4,
                  imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/47/c2b659e048b11602.png',
                  desc: '溜娃儿'
                },
                {
                  id: 5,
                  imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20191/0334cf5430b9b5505fd79e2b8d7e8670.png',
                  desc: '爬长城'
                },
                {
                  id: 6,
                  imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/6c/9e54a8540fee0102.png',
                  desc: '故宫'
                },
                {
                  id: 7,
                  imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/338c5b924c5809e8c7b14f60a953c3e2.png',
                  desc: '北京欢乐谷'
                },
                {
                  id: 8,
                  imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/6b7127c142123eabcf3e41c136e0ccc2.png',
                  desc: '京城赏花'
                },
                {
                  id: 9,
                  imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
                  desc: '北京必游'
                },
                {
                  id: 10,
                  imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/54/35899492b1302802.png',
                  desc: '世界公园'
                },
                {
                  id: 11,
                  imgUrl: 'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
                  desc: '北京必游'
                },
                {
                  id: 12,
                  imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/47/c2b659e048b11602.png',
                  desc: '溜娃儿'
                },
              ]
            }
        },
        computed: {
          pages () {
            const pages = []
            this.iconLists.forEach((item,index) => {
              const page = Math.floor(index / 8)
              if (! pages[page]) {
                pages[page] = []
              }
              pages[page].push(item)
            })
            return pages
          }
        }
    }
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles'
  .icons >>> .swiper-container
    height: 0
    padding-bottom: 50%
  .icon-item
    position: relative
    overflow: hidden
    float: left
    width: 25%
    padding-bottom: 25%
    .icon-item-img
      position: absolute
      top: 0
      left: 0
      right: 0
      bottom: .4rem
      padding: .1rem
      .item-img-content
        display: block
        margin: 0 auto
        height: 100%
    .item-desc
      position: absolute
      bottom: 0
      width: 100%
      height: .44rem
      text-align: center
      color: $darkText
</style>
